<template>
	<view class="content">
		<view class="rpx">rpx</view>
		<view class="vw">vw</view>
		<view class="sass">sass</view>
		<view class="title">{{title}}</view>

		<view>================================</view>
		<view v-show="true">v-show-true</view>
		<view v-show="false">v-show-false</view>
		<view v-if="true">v-if-true</view>
		<view v-if="false">v-if-true</view>
		<view>================================</view>
		<view>
			<view v-for="item in list" :key="item.id">
				{{item}}------{{item.id}}
			</view>
		</view>
		<view>=================================</view>
		<view>￥ {{money}}</view>
		<view>{{cnMoney}}</view>
		<view>=================================</view>
		<view>
			<button data-index="11" type="primary" @click="chose" size="mini">操作</button>
			<button data-index="11" type="warn" @click="chose" size="mini">删除</button>
		</view>
		<view>=================================</view>
		<view>

		</view>
	</view>
</template>

<script>
export default {
	// 1、data 定义数据
	data() {
		return {
			title: '我是你爸爸',
			// 数字
			money: 10000,
			// 数组
			list: [
				{
					id: 0,
					text: "苹果"
				},
				{
					id: 1,
					text: "香蕉"
				},
				{
					id: 2,
					text: "橙子"
				}
			]
		}
	},
	// 2、计算属性
	computed: {
		// 把 cnMoney 看成是在
		cnMoney() {
			// ￥ number
			return "￥" + this.money
		},
		// 过滤数组
		filterList() {
			//
			return this.list
		}
	},
	onLoad() {

	},
	methods: {
		chose() {
			console.log("我就是你的爸爸")
		}
	}
}
</script>

<style lang="scss">
	.rpx{
	/*	 rpx 小程序中的单位 750rpx = 屏幕的宽度 */
		width: 750rpx;
		height: 100px;
		background-color: aqua;
	}
	.vw{
	/*	vw  h5单位 100vw = 屏幕的宽度 100vh = 屏幕的高度 */
		width: 50vw;
		height: 100px;
		background-color: tan;
	}

	.content{
		.sass{
			background-color: red;
			color: $uni-color-primary;
		}
		.title{
			width: 100%;
			height: 100px;
			background-color: grey;
			color: $uni-color-paragraph;
		}
	}
</style>
